<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>子组件中num值：{{value}}</p>
        <hr>
        <!-- 如果要早自定义组件中监听原生事件，需要加上.native这个修饰符 -->
        <hmb @zyx="zyxHandler" @dblclick.native="dblHandler"></hmb>
        <hr>
        <!-- 在组件上使用v-model指令 -->
        <dlrb v-model="childNum"></dlrb>
        <!-- <dlrb @input="childNum"></dlrb> -->
        <h1>来自子组件的数据，使用v-model监听:{{childNum}}</h1>
        <!-- v-model的庐山真面目 -->
        <!-- <input type="text" v-model="inputVal">语法糖的写法 -->
        <input v-on:input="inputVal = $event.target.value" 
               v-bind:value="inputVal"><!-- v-model真实的写法 -->
        <p>{{inputVal}}</p>
        <hr>
        <!-- 使用v-model从父组件向子组件传值 -->
        <ca v-model="totle"></ca>
        <button @click="reduceTotle">-1</button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: function() {
                return {
                    value: 0,
                    childNum: 0,
                    inputVal: '',
                    totle: 0
                }
            },
            components: {
                hmb: {
                    template: 
                    `
                      <div style="width:200px;height:200px;border:1px solid red">
                        <span>{{num}}</span>
                        <button @click="changeNum">click</button>
                        <mark>子传父的步骤</mark>
                        <mark>1.先在子组件中计算好数据，通过$emit方法发射，第一个参数是自定义是事件的名称</mark>
                        <mark>第二、三、四..个参数是要传递的数据</mark>
                        <mark>2.在父组件中找到子组件的标签，通过@监听自定义事件</mark>
                        <mark>3.在对应的回调函数中获取传过来的值</mark>
                      </div>
                    `,
                    data:function() {
                        return {
                            num:1
                        }
                    },
                    methods: {
                        changeNum() {
                            // ...
                            this.num ++;
                            this.$emit('zyx',this.num,666)
                        }
                    },
                },
                dlrb: {
                    template: 
                    `
                      <div>
                        <p>{{num}}</p>
                        <button @click="handlerClick">+1</button>
                      </div>
                    ` ,
                    data() {
                        return {
                            num:0
                        }
                    },
                    methods: {
                        handlerClick() {
                            this.num ++;
                            this.$emit('input',this.num)
                        }
                    },
                },
                ca: {
                    template: '<input :value="value" @input="updateVal">',
                    data() {
                        return {

                        }
                    },
                    props: ['value'],
                    methods: {
                        updateVal(event) {
                            this.$emit('input',event.target.value)
                        }
                    },
                }
            },
            // 父组件的方法
            methods: {
                zyxHandler(val,data) {
                    this.value = val
                    console.log(data)
                },
                dblHandler() {
                    alert(666)
                },
                inputHandler($event) {
                    this.inputVal = $event.target.value
                },
                reduceTotle() {
                    this.totle --
                }
            },
        })
    </script>
</body>
</html>